<template>
       <!-- 轮播图 -->
    <div
      id="carousel-example-generic"
      class="carousel slide"
      data-ride="carousel"
    >
      <!-- Indicators 指示器  -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active" ></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides  图片容器 -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="@/assets/slide/1.jpeg" alt="..." />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="@/assets/slide/2.jpeg" alt="..." />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="@/assets/slide/3.jpeg" alt="..." />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="@/assets/slide/4.jpeg" alt="..." />
          <div class="carousel-caption"></div>
        </div>
      </div>

      <!-- Controls 上下分页 -->
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span
          class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span
          class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</template>

<script>
export default {
  name: 'ProjectFrontCarousel',

  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.item{
  img{
    width: 100vw;
    height: 90vh;
  }
}
</style>
